<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../jquery.min.js"></script>
    <script src="../mustache.min.js"></script>
    <script src="../js/clickNavigation.js"></script>
    <link href="../css/navigation_bar.css" rel="stylesheet">
    <script src="../node_modules/lodash/lodash.min.js"></script>
    <link href="../css/shopping_cart.css" rel="stylesheet">
    <script type="x-tmpl-mustache" id="car_template">
        <tbody>
            {{#shoppingCart}}
                <tr id={{id}}>
                    <td class="type">{{type}}</td>
                    <td class="name">{{name}}</td>
                    <td class="price">{{price}}</td>
                    <td class="unit">{{unit}}</td>
                    <td>
                        <div>
                           <button id={{minId}}>-</button>
                           <input  id={{inputId}} class="input" value={{count}}>
                           <button id={{addId}}>+</button>
                        </div>
                    </td>
                    <td class="subtotal">{{subtotal}}</td>
                </tr>
            {{/shoppingCart}}
        </tbody>
    </script>

    <script type="text/template" id="page_template">
        <button>page</button>
    </script>

    <script src="../js/shoppingCart.js"></script>
    <title></title>
</head>
<body>
    <div class="navigation_bar">
       <div class="navigation">
           <p id="go">Let's Go</p>
           <p id="to_main">主页</p>
           <p id="to_goodsList">商品列表</p>
           <div class="nav_shop_car" style="color: white; background: rgb(8, 8, 8)">
               <img src="../image/shop_car_white.png" />
               <p style="color: white; background: rgb(8, 8, 8)">购物车<span> (0)</span></p>
           </div>
       </div>
    </div>

    <div class="shop_cart">
        <div class="title_bar"><h2>购物清单</h2></div>
        <table>
            <thead>
            <tr>
                <th style="width: 10%">分类</th>
                <th>名称</th>
                <th>单价(元)</th>
                <th style="width: 10%">单位</th>
                <th style="width: 24%">数量</th>
                <th style="width: 27%">小计</th>
            </tr>
            </thead>
            <!--<tbody>-->
            <!--<tr>-->
                <!--<td>饮料</td>-->
                <!--<td>可口可乐</td>-->
                <!--<td>3</td>-->
                <!--<td>瓶</td>-->
                <!--<td>-->
                    <!--<div>-->
                        <!--<button>-</button>-->
                        <!--<p>5</p>-->
                        <!--<button>+</button>-->
                    <!--</div>-->
                <!--</td>-->
                <!--<td><b>12</b>元(原价: <b>18</b>元)</td>-->

            <!--</tr>-->
            <!--</tbody>-->
        </table>
        <div id="jump_page">

        </div>
        <div class="pay_div">
            <p>总计：<b>0.00元</b></p>
            <button>付款</button>
        </div>
    </div>

</body>
</html>